<script setup name="login">
// 图片当成对象导入即可
import login_img from "@/assets/image/login.png"
// import axios from "axios";
import { reactive } from "vue";
import { useAuthStore } from "@/stores/auth";
import { useRouter } from "vue-router";
import authHttp from "@/api/authHttp"
import { ElMessage } from "element-plus";

const authStore = useAuthStore()
const router = useRouter()

let form = reactive(
  {
    email: '',
    password: ''
  })

const onSubmit = async () => {
  let pwdRgx = /^[0-9a-zA-Z_-]{6,20}/
  let emailRgx = /^([0-9a-zA-Z_-])+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9])+/
  // console.log(form.email, form.password)
  // 前端先初步校验，免得老是去查数据库
  if(!(emailRgx.test(form.email))){
    // alert("邮箱格式不满足")
    ElMessage.error('邮箱格式不满足')
    return;
  }
  if(!(pwdRgx.test(form.password))){
    // alert("密码格式不满足")
    ElMessage.error('密码格式不满足')
    return;
  }

  // axios执行
  // axios.post("http://localhost:8000/auth/login", {
  //   email: form.email,
  //   password: form.password
  // }).then((res) => {
  //   // then: 当返回状态码为200时会执行
  //   let data = res.data;
  //   let token = data.token;
  //   let user = data.user;
  //   authStore.setUserToken(user, token)
  //   // 现在跳转到OA系统的主页,这里不让后端去跳转的原因是前端需要先保存token,保存完后顺手就跳转了
  //   router.push({name: 'frame'})
  //   console.log(user.realname, token);
  // }).catch((err) => {
  //   // catch: 当后端返回非200时会执行后去看浏览器找到位置
  //   // console.log(err);
  //   let detail = err.response.data.detail;
  //   alert(detail); 
  // })

  // 第二版，封装了一些逻辑到authHttp中
  // authHttp.login(form.email, form.password).then((res) => {
  //   let data = res.data;
  //   let token = data.token;
  //   let user = data.user;
  //   authStore.setUserToken(user, token)
  //   router.push({name: 'frame'})
  //   console.log(user.realname, token);
  // }).catch((err) => {
  //   let detail = err.response.data.detail;
  //   alert(detail); 
  // })


  // 这里不能在使用then,catch了，此时login已经不是axios.post了
  try{
    let data = await authHttp.login(form.email, form.password)
    let token = data.token;
    let user = data.user;
    authStore.setUserToken(user, token)
    router.push({name: 'frame'})
  }catch(detail){
    // alert(detail)
    // console.log(detail)
    ElMessage.error(detail)
  }
}

</script>

<template>
  <div class="dowebok">
    <div class="container-login100">
      <div class="wrap-login100">
        <div class="login100-pic js-tilt" data-tilt="">
          <img :src="login_img" alt="IMG">
        </div>

        <div class="login100-form validate-form">
          <span class="login100-form-title"> 员工登陆 </span>

          <div class="wrap-input100 validate-input">
            <input class="input100" type="text" name="email" placeholder="邮箱" v-model="form.email">
            <span class="focus-input100"></span>
            <span class="symbol-input100">
              <i class="iconfont icon-fa-envelope" aria-hidden="true"></i>
            </span>
          </div>


          <div class="wrap-input100 validate-input">
            <input class="input100" type="password" name="password" placeholder="密码" v-model="form.password">
            <span class="focus-input100"></span>
            <span class="symbol-input100">
              <i class="iconfont icon-fa-lock" aria-hidden="true"></i>
            </span>
          </div>

          <div class="container-login100-form-btn">
            <button class="login100-form-btn" @click="onSubmit">
              登陆
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped src="@/assets/css/login.css"></style>
<style scoped src="@/assets/iconfont/iconfont.css"></style>
